var UtilizationDayChart = function () {
  var template = /* html */ `
    <div class="utilization-day-chart utilization-chart">
      <div class="utilization-chart-title">
        <span>{{month?moment(month).format('YYYY年MM月'):''}}日利用率</span>
        <div class="utilization-chart-search">
          <el-date-picker v-model="search.month" type="month" size="mini" value-format="timestamp" :clearable="false"
            :editable="false" style="width:200px" :picker-options="pickerOption" @change="searchData">
          </el-date-picker>
        </div>
      </div>
      <div ref="chart" class="utilization-chart-div"></div>
    </div>
  `;

  return {
    props: {
      utilizationData: {
        type: Object,
        required: true
      },
      pagination: {
        type: Object,
        required: true
      },
      search: {
        type: Object,
        required: true
      },
      searchFun: Function
    },

    watch: {
      changeData: function () {
        this.clearTimeout();
        this.showChart();
        this.chartRunning();
      }
    },

    computed: {
      changeData: function () {
        var utilizationData = this.utilizationData;
        var pagination = this.pagination;
        var equipmentList = utilizationData.equipmentList;
        var str = equipmentList.join(',');
        return [utilizationData.dayRateId, str, pagination.currentPage].join('_');
      }
    },

    data: function () {
      return {
        month: null,
        oldPagination: _.cloneDeep(this.pagination),
        pickerOption: {
          disabledDate: function (time) {
            return moment(time).isAfter(moment(), 'month');
          }
        },
        timeout: null,
        moment: moment
      };
    },

    mounted: function () {
      this.showChart();
      this.chartRunning();
      var self = this;
      $(this.$el).resize(function () {
        if (!self.$refs['chart']) {
          return;
        }
        var chart = echarts.getInstanceByDom(self.$refs['chart']);
        if (chart !== undefined) {
          chart.resize();
        }
      });
    },

    beforeDestroy: function () {
      this.clearTimeout();
    },

    methods: {
      chartRunning: function () {
        var self = this;
        this.clearTimeout();
        var timeout = setTimeout(function () {
          var utilizationData = self.utilizationData;
          var flag = utilizationData.incrementDayIndex();
          if (flag) {
            self.showChart();
          }
          self.timeout = null;
          self.chartRunning();
        }, 5000);
        this.timeout = timeout;
      },

      getChart: function () {
        var chartDom = this.$refs['chart'];
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart === undefined) {
          chart = echarts.init(chartDom);
        }
        return chart;
      },

      showChart: function () {
        this.month = this.search.month;
        var chart = this.getChart();
        var chartOption = this.getChartOption();
        this.resetChartOption(chartOption);
        chart.setOption(chartOption, true);
      },

      getChartOption: function () {
        var chartOption = {
          color: window.boardChartColor,
          grid: {
            right: 40,
            left: 40,
            bottom: 30,
            top: 40
          },
          legend: {
            type: 'scroll',
            top: 5,
            right: 5,
            width: '90%',
            pageIconColor: '#ffffff',
            textStyle: {
              color: '#44D3E4',
              fontSize: 16
            },
            pageTextStyle: {
              color: '#44D3E4',
              fontSize: 16
            }
          },
          xAxis: [{
            type: 'category',
            // boundaryGap: false,
            name: '日',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12,
              interval: 0,
              formatter: function (value) {
                value = value.slice('-2');
                value = parseInt(value);
                return value;
              }
            }
          }],
          yAxis: [{
            type: 'value',
            min: 0,
            max: 5,
            name: '利用率(%)',
            nameGap: 10,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12
            }
          }],
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              var name = params[0].name;
              var texts = [name];
              for (var i = 0; i < params.length; i++) {
                var param = params[i];
                var values = param.value;
                texts.push(`${param.marker}${param.seriesName}:${values[1]}%`);
              }
              return texts.join('<br>');
            }
          },
          series: []
        };
        return chartOption;
      },

      resetChartOption: function (chartOption) {
        var utilizationData = this.utilizationData;
        var chartData = utilizationData.getDayChartData(this.pagination);
        var maxValue = 0;
        var series = [];
        for (var i = 0; i < chartData.length; i++) {
          var obj = chartData[i];
          if (maxValue < obj.maxValue) {
            maxValue = obj.maxValue;
          }

          var dayData = obj.data;
          dayData = _.map(dayData, function (obj) {
            return [obj.day, obj.value];
          });
          var serie = {
            type: 'bar',
            barMaxWidth:'40px',
            name: obj.equipmentNo,
            data: dayData
          };
          series.push(serie);
        }

        if (maxValue === 0) {
          maxValue = 5;
        } else {
          maxValue = Math.ceil(_.round(maxValue / 5, 2)) * 5;
        }
        _.set(chartOption, 'yAxis[0].max', maxValue);
        chartOption.series = series;
      },

      searchData: function () {
        var searchFun = this.searchFun;
        if (searchFun) {
          searchFun('day');
        }
      },

      clearTimeout: function () {
        var timeout = this.timeout;
        if (timeout !== null) {
          window.clearTimeout(timeout);
          this.timeout = null;
        }
      }
    },

    template: template
  };
}();
